<template>
  <div class="echars-bar">
    <div :ref="`echarts-bar${id}`" class="two-bar-line" :style="{height: height}" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EchartsBar',
  props: {
    xAxisName: {
      type: String,
      default: ''
    },
    enrollmentList: { // 注册人数数组
      type: Array,
      default: () => []
    },
    userCountList: { // 施工人数数组
      type: Array,
      default: () => []
    },
    nameList: { // 人员类型名称
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '240px'
    }
  },
  data() {
    return {
      echarts: null
    }
  },
  watch: {
    nameList(values) {
      if (values) {
        this.initEcharts()
      }
    }
  },
  mounted() {
    this.initEcharts()
  },
  beforeDestroy() {
    // 销毁监听事件
    window.removeEventListener('resize', this.resizeHandler)
    this.echarts && this.echarts.dispose()
  },
  methods: {
    initEcharts() {
      const options = {
        tooltip: {
        // 提示框
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 10,
          icon: 'circle',
          data: ['注册的人数', '施工中的人数'],
          textStyle: {
            color: '#6AA4F5'
          }
        },
        grid: {
          left: 50,
          right: 65,
          bottom: 45
        },
        xAxis: {
          name: this.xAxisName,
          nameTextStyle: {
            color: '#fff'
          },
          type: 'category',
          data: this.nameList,
          axisLabel: {
            color: '#fff',
            fontSize: 12,
            // interval: 0,
            rotate: 30
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              width: 1,
              type: 'solid'
            }
          }
        },
        yAxis: [
          {
            name: '(人)',
            type: 'value',
            min: 0,
            max: 5,
            minInterval: 1,
            nameTextStyle: {
              color: '#fff'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#eee',
              fontSize: 12
            },
            splitLine: {
              lineStyle: {
                color: ['#12fffe'],
                type: 'dotted'
              }
            }
          }
        ],
        series: [
          {
            name: '注册的人数',
            data: this.enrollmentList,
            type: 'bar',
            barWidth: '6px',
            itemStyle: {
              color: '#00ffe6',
              barBorderRadius: [180]
            },
            yAxisIndex: 0
          },
          {
            name: '施工中的人数',
            data: this.userCountList,
            type: 'bar',
            showBackground: false,
            barWidth: '6px',
            itemStyle: {
              color: '#007AFF',
              barBorderRadius: [180]
            },
            yAxisIndex: 0
          }
        ]
      }
      this.echarts = echarts.init(this.$refs[`echarts-bar${this.id}`])
      this.echarts.setOption(options)
      // 绑定监听事件
      window.addEventListener('resize', this.resizeHandler)
    },
    resizeHandler() {
      this.echarts.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
  .echars-bar{
    .two-bar-line{
      height:274px;
    }
  }
</style>
